<style>

</style>
<template>
    <section class="clearfix content">
        <h4 class="detail-hd">详情<button @click="toModify" v-if="type==1" class="fr btn-default">编辑</button></h4>
        <ul class="detail-list">
            <li><label for="">名称</label>
                <span v-if="type == 1">{{param.name}}</span>
                <span v-if="type != 1"><input type="text" v-model="param['name']"></span>
            </li>
            <li><label for="">图片</label>
                <span class="clearfix" v-if="type == 1"><em class="img-box"><img v-bind:src="param.image" alt=""></em></span>
                <span class="clearfix overflow" v-if="type != 1">
                    <em class="img-box pr"><b>上传图片</b>
                        <form class="pa" action="" enctype="multipart/form-data" name="image">
                            <input class="pa opacity cursor file" @change="upload" name="file" type="file">
                        </form>
                        <em class="pa img"><img v-bind:src="param.image" alt=""></em>
                    </em>
                </span>
            </li>
            <li><label for="">简介</label>
                <span v-if="type == 1">{{param.description}}</span>
                    <span v-if="type != 1">
                        <textarea name=""style="height: 90px;width: 60%" id="" cols="30"  v-model="param['description']" rows="10"></textarea>
                    </span>
            </li>
            <li><label for="">是否启用</label>
                <span v-if="type==0"><input  type="checkbox" v-model="param['enabled']" checked="{{param.enabled}}"></span>
                <span v-else>{{param.enabled?"是":"否"}}</span>
            </li>
        </ul>
        <div class="sub-group"  v-if="type==0">
            <button @click="modify">保存</button>
            <button @click="back">返回</button>
        </div>
    </section>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                list:[],
                pageNo:1,
                pageSize:VIE.pageSize,
                totalPage:'',
                pages:[],
                param:{
                    image:"",
                    name:"",
                    enabled:"",
                    description:"",
                },
                type:0,
            }
        },
        methods: {
            render: function(){
                var params = {};
                VIE.getJ(HTTP_SERVER+'api/background/'+VIE.QueryString('id'),params,this,this.success,this.error);
            },
            success: function(data){
                this.param.name = data.name;
                this.param.description = data.description;
                this.param.enabled = data.enabled;
                this.param.image = data.image;
            },
            error: function(){

            },
            toggleAside: function(){
                $(".nav-aside>ul,.nav-aside>.asidedetail").toggleClass('all');
            },
            back: function(){
                router.go("background");
            },
            modify: function(){
                if(VIE.QueryString('id')){
                    this.param.id = VIE.QueryString('id');
                    VIE.putJ(HTTP_SERVER+'api/background',this.param,this,this.toList,this.error);
                }else{
                    VIE.postJ(HTTP_SERVER+'api/background',this.param,this,this.toList,this.error);
                }
            },
            toModify: function(){
                this.type = 0;
            },
            toList: function(data){
                router.go("background");
            },
            upload: function(){
                VIE.upload("image",HTTP_SERVER+'api/upload/single',this,this.geturl,this.error);
            },
            geturl: function(data){
                var _this = this;
                _this.param.image = data.url;
            },
        },
        ready: function() {
            var _this = this;
            var loads = function(){
                if(VIE.QueryString('type')){
                    _this.type = 1;
                    _this.render();
                }else{
                    _this.type = 0;
                }
                _this.param = {
                    image:"",
                    name:"",
                    enabled:"",
                    description:"",
                };
            }
            var name = window.location.hash.split('?')[0].replace("#/","");
            if(!name){
                name = "user";
            }
            if(!router.fn[name]){
                loads();
                router.fn[name] = loads;
            }

        }
    };

</script>